<template>
  <div class="app-container">
    <span>预计实施量：</span>
    <div class="h12" />
    <p><b class="font48 color-primary mr8">{{ formData.amount.toFixed(2) }}</b><b class="font24 color-black">mm</b></p>
    <div class="h12" />
    <el-button type="primary" @click="generatePlan()">生成灌溉计划</el-button>
  </div>
</template>

<script type="text/ecmascript-6">
import { dclassCodeMap } from '@/utils/constant'
import { mapGetters } from 'vuex'
import { processVRI } from '@/api/remote'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {}
    }
  },
  computed: {
    ...mapGetters(['devices']),
    fkqs() {
      return this.devices.filter((val) => {
        return +val.product_type === dclassCodeMap.fkq
      })
    }
  },
  watch: {
    fkqs: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.formData.serialno = newVal[0].serialno
        }
      },
      immediate: true
    },
    'formData.amount': {
      handler(newVal) {
        this.formData.timetran = Math.ceil(+newVal / 3 * 60)
      },
      immediate: true
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('changeStatusSubmit', this.formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    generatePlan() {
      this.$confirm('是否生成灌溉计划？', '操作确认').then(async() => {
        const params = { time: this.formData.created_at }
        const { data, msg } = await processVRI(params)
        this.$message.success(msg)
        console.log(data)
      }).catch((e) => { console.log(e) })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
